<template>
    <div style="width: 100%;padding: 10px">
        <!--    <Distpicker v-show="false"  @selected="onSelected" :province="district.province" :city="district.city"
                :area="district.area"></Distpicker>-->
        <el-card class="box-card">
            <div>
                <div style="display: flex;align-items: center;justify-content: space-between">
                    <div class="details_Header">
                        <div class="deleted_Line"></div>
                        <span class="details_HeaderTitle">领用单信息</span>
                    </div>
                    <div style="display: flex">
                        <el-button type="primary" v-permission="['borrow.edit']" v-show="form.status === 0" @click="editClick">修改</el-button>
                        <el-button type="primary" :loading="auditClicked" v-show="form.status === 0" v-permission="['borrow.audit']" @click="auditClick">审核
                        </el-button>
                        <el-button type="primary" :loading="auditClicked" v-show="form.status === 1" v-permission="['borrow.unAudit']" @click="unAuditClick">取消审核
                        </el-button>
                        <el-button type="danger" v-show="form.status==0 || form.status == 3" style="margin-left: 10px" v-permission="['borrow.del']" :loading="delClicked" @click="delClick">删除订单
                        </el-button>
                        <el-dropdown style="margin-left: 10px" split-button type="primary" v-permission="['allocate.print']" v-show="form.orderStatus != 0&&form.orderStatus != 3 " @click="printClick" @command="handleCommand">
                            打印
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item command="printSetupClick">模版设置</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                        <!-- <ExportList2Excel style='margin-top: 5px;' ref="exportList2Excel" @handleExport="handleExport"  name="导出" /> -->

                    </div>
                </div>
                <div class="deleted_OrderHeader" style="border-left: none;">
                    <el-row :gutter="24">
                        <el-col :span="8">
                            <span class="deleted_Row_Headings">领用单号：</span>
                            <span class="deleted_OrderTitle">{{form.sn}}</span>
                        </el-col>
                        <el-col :span="8">
                        </el-col>
                        <el-col :span="8">
                            <span class="deleted_Row_Headings">状态：</span>
                            <span class="deleted_OrderTitle" style="color: rgb(64, 158, 255)">{{form.status | watchStatus}}</span>
                        </el-col>
                        <el-col :span="8">
                            <span class="deleted_Row_Headings">领用日期：</span>
                            <span class="deleted_OrderTitle">{{form.orderDate | dateFormatter}}</span>
                        </el-col>
                    </el-row>
                </div>
                <div>
                    <el-row :gutter="24" class="deleted_OrderContent">
                        <el-col :span="8">
                            <span class="deleted_Row_Headings">领用货员：</span>
                            <span class="deleted_OrderTitle">{{form.employeeName}}</span>
                        </el-col>
                        <el-col :span="8">
                            <span class="deleted_Row_Headings">领货仓库：</span>
                            <span class="deleted_OrderTitle">{{form.shopName}}</span>
                        </el-col>
                        <el-col :span="8">
                            <span class="deleted_Row_Headings">类型：</span>
                            <span class="deleted_OrderTitle">{{form.borrowType|watchBorrowType}}</span>
                        </el-col>
                    </el-row>
                    <el-row :gutter="24" class="deleted_OrderContent">

                        <el-col :span="8">
                            <span class="deleted_Row_Headings">留言备注：</span>
                            <span class="deleted_OrderTitle">{{form.memo}}</span>
                        </el-col>
                    </el-row>
                </div>
                <div>
                </div>
                <div style="margin-top:20px">
                    <div class="product_header_name" style="">
                        <span style="font-size: 18px;color:#409EFF;margin: 10px 10px;">领用明细</span>
                    </div>
                    <el-table :data="form.itemList" border show-summary stripe style="width: 100%">
                        <el-table-column label="排序" type="index" width="50">
                        </el-table-column>
                        <el-table-column label="商品名" header-align="center" width="250" prop="name">

                        </el-table-column>
                        <el-table-column label="规格" width="200" header-align="center" align="left">
                            <template slot-scope="{row}">
                                <span>{{row.spec}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="货号/条码" header-align="center" align="left">
                            <template slot-scope="{row}">
                                <span>{{row.sn}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="单位" width="100" align="center">
                            <template slot-scope="{row}">
                                <span>{{row.unit}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="数量" prop="quantity" align="right" headerAlign="center" width="100">
                        </el-table-column>
                        <el-table-column label="单价" align="right" headerAlign="center" width="100" prop="cost">
                        </el-table-column>
                        <el-table-column label="金额" width="100" align="right" headerAlign="center" prop="subTotal">
                        </el-table-column>
                        <!--          <el-table-column
            label="优惠"
            width="100"
            align="center"
            prop="discount"
          >
          </el-table-column>
          <el-table-column
            label="实收"
            width="100"
            align="center"
            prop="amountPaid"
          >-->
                        </el-table-column>
                        <el-table-column align="center" width="100" label="操作">
                            <template slot-scope="{row}">
                                <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                                    <a @click="delProduct(row)" v-if="row.productId!=''">
                                        <i style="color: #F56C6C" class="el-icon-delete"></i>
                                    </a>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </el-card>
        <el-dialog title="打印安装教程" :visible.sync="isNoInstall" width="600px" v-el-drag-dialog append-to-body :before-close="installClose">
            <div style="position: relative;height: 30vh;overflow: auto">
                <div>
                    <span style="font-weight: bold">未检测到您的打印控件，请检查是否安装以下两个打印控件</span>
                    <span style="display: block;margin-left: 20px;line-height: 20px">1、install_lodop64.exe（或者32位，根据自己的电脑位数）</span>
                    <span style="display: block;margin-left: 20px;line-height: 20px">2、CLodopPrint_Setup_for_Win32NT.exe（32位64位皆可用）</span>
                    <span style="display: block;margin-left: 20px;line-height: 20px">3、苹果系统暂时无法支持</span>
                    <span style="font-weight: bold">已经下载</span>
                    <span style="display: block;margin-left: 20px;line-height: 20px">如果已有两个软件，请检查是否已经打开服务。</span>
                    <span style="font-weight: bold">未下载</span>
                    <span style="display: block;margin-left: 20px;line-height: 20px">如果没有两个控件的客户，您可以点击下面的下载地址自行前往下载<a style="color: #00B6FB;margin-left: 20px" target="view_window" href="http://www.c-lodop.com/download.html">下载地址</a></span>
                    <span style="display: block;margin-left: 20px;line-height: 20px">(提示：请下载Lodop发型包Windows版，里面包含所需的两个控件，安装完后请刷新本页面方可使用打印，install_lodop64.exe软件下载完打开即可，
                        CLodopPrint_Setup_for_Win32NT.exe需要安装，您可以直接选择开机自动启动)</span>
                </div>
            </div>
        </el-dialog>
        <!--    <orderPrint @isTeach="isTeach" v-if="isPrintShow==true" :form="form" :title="title" style="display: none" :sendForm="sendForm"-->
        <!--                :memoName="memoName"   :signName="signName" ref="orderPrint"></orderPrint>-->
        <orderPrintTwo @isTeach="isTeach" v-if="isPrintShow==true" :form="form" printName="borrow_10200_0" :shopName="shopName" :sendForm="sendForm" :officeName="officeName" ref="orderPrintTwo"></orderPrintTwo>
    </div>
</template>

<script>
import ExportList2Excel from "@/components/ExportList2Excel";
import loadMore from "@/utils/more.js";
import orderPrint from "@/components/OrderPrint/orderPrint";
import orderPrintTwo from "@/components/OrderPrint/orderPrintTwo";
import Distpicker from "@/components/Distpicker/Distpicker";
import permission from "@/directive/permission/index.js"; // 权限判断指令
import { EventBus } from "@/api/eventBus";
import {
    update,
    find,
    audit,
    unAudit,
    cancel,
    del,
    exportView,
    print,
} from "@/api/borrow";
import utils from "../../utils/utils.js";
import elDragDialog from "@/directive/el-drag-dialog"; // base on element-ui
import { mapGetters } from "vuex";
import printJs from "print-js";
import { summary, completeBatch } from "@/api/shippingSettle";
export default {
    name: "borrow-view",
    directives: { elDragDialog, permission, loadMore },
    data() {
        return {
            form: {},
            itemForm: [],
            clicked: false,
            isPrintShow: false,
            delClicked: false,
            closeClicked: false,
            isNoInstall: false,
            orderLog: [],
            areaName: "",
            employeeName: "",
            officeName: "",
            sendForm: {},
            operatorName: "",
            pdfUrl: "",
            times: null,
            auditClicked: false,
            cancelClicked: false,
            payLoads: "",
            tabsHeight: null,
            curHeight: null,
            total: 0,
            pageNum: 1,
            pageSize: 20,
            shopName: "",
        };
    },
    watch: {
        // 只要路由发生变化就重新获取数据
        $route(newVal, oldVal) {
            if (
                newVal.name == "borrow-view" &&
                newVal.query.id != this.form.id
            ) {
                this.form.id = newVal.query.id;
                this.findClick();
            }
        },
    },
    components: { Distpicker, orderPrintTwo, ExportList2Excel },
    computed: {
        ...mapGetters(["token", "scopeType"]),
    },
    filters: {
        watchIsExit(val) {
            if (val == "") {
                return "无";
            } else {
                return val;
            }
        },
        watchStatus(val) {
            if (val == 0) {
                return "未审核";
            } else if (val == 1) {
                return "已审核";
            } else if (val == 2) {
                return "已完成";
            } else if (val == 3) {
                return "已取消";
            }
        },
        watchBorrowType(val) {
            if (val == 1) {
                return "生产领用";
            }
        },
    },
    created() {
        var _this = this;
        _this.form.id = this.$route.query.id;
        _this.findClick();
        EventBus.$on("borrow-view", (res) => {
            // 监听新增完毕
            // 更新列表数组
            _this.form.id = res.id;
            _this.findClick();
        });
        EventBus.$on("borrow-edit", (res) => {
            // 监听新增完毕
            // 更新列表数组
            _this.form.id = res.id;
            _this.findClick();
        });
    },
    activated() {
        this.payLoads = new Date().getTime();
    },
    mounted() {
        this.comeIn();
        this.beforeMount();
    },
    methods: {
        printClick() {
            this.isPrintShow = true;
            setTimeout(() => {
                this.$refs.orderPrintTwo.printPdf();
            }, 1000);
            //  this.pdfUrl = process.env.VUE_APP_BASE_API + '/admin/order/print/' + this.form.id + '?token=' + this.token
            // window.open(this.pdfUrl)
        },
        watchStatus(val) {
            if (val == 0) {
                return "未审核";
            } else if (val == 1) {
                return "已审核";
            } else if (val == 2) {
                return "已完成";
            } else if (val == 3) {
                return "已取消";
            }
        },
        handleExport() {
            let _this = this;
            // var  loading = this.$loading({
            //   lock: true,
            //   text: 'Loading',
            //   spinner: 'el-icon-loading',
            //   background: 'rgba(0, 0, 0, 0.7)'
            // });
            //要导出函数携带的参数
            //要导出函数携带的参数
            let data = {};
            data.tHeader = [
                "领货单号",
                "状态",
                "领货日期",
                "送货员",
                "领货仓库",
                "留言备注",
                "商品编号",
                "商品名称",
                "单位",
                "规格",
                "分拣数量",
                "已配送数量",
                "剩余数量",
            ];
            data.filterVal = [
                "sn",
                "status",
                "orderDate",
                "employeeName",
                "shopName",
                "memo",
                "productId",
                "name",
                "unit",
                "spec",
                "quantity",
                "shippingQuantity",
                "surplus",
            ];
            data.filename = "领货单列表";
            find(this.form.id)
                .then((response) => {
                    response.data.borrow.orderDate = utils.dateFormatter(
                        response.data.borrow.orderDate
                    );
                    response.data.borrow.status = this.watchStatus(
                        response.data.borrow.status
                    );
                    //data.list= response.data.picking;
                    const tableexport = response.data.borrow;
                    let params = new URLSearchParams();
                    params.append("pageNum", 0);
                    params.append("pageSize", 0);
                    params.append("borrowId", this.form.id);
                    list(params).then((response) => {
                        _this.itemForm = response.data.data;
                        this.$set(_this.itemForm, "surplus", "");
                        const borrowarray = [];
                        _this.itemForm.forEach((item) => {
                            item.surplus = Number(item.quantity);
                            item = { ...tableexport, ...item };
                            borrowarray.push(item);
                            //console.log(item);
                        });
                        data.list = borrowarray;
                        console.log(data.list);
                        //data.list=this.itemForm
                        //console.log(data.list);
                        _this.$refs.exportList2Excel.handleDownload(data);
                    });
                    //console.log(data.list);
                    //          _this.employeeName=response.data.employeeName
                    //_this.operatorName = response.data.operatorName;
                    //_this.$refs.exportList2Excel.handleDownload(data);
                })
                .catch((error) => {
                    // _this.$refs.exportList2Excel.unlockLoading()
                    //       loading.close();
                    console.log("error!!");
                });
            // setTimeout(()=>{
            //   loading.close();
            // },1000)
        },
        beforeMount() {
            var _this = this;
            window.onresize = () => {
                return (() => {
                    if (_this.queryType == false) {
                        var h =
                            document.documentElement.clientHeight ||
                            document.body.clientHeight;
                        _this.curHeight = h - 311; //减去页面上固定高度height
                        _this.tabsHeight = h - 381;
                    } else {
                        var h =
                            document.documentElement.clientHeight ||
                            document.body.clientHeight;
                        _this.curHeight = h - 224; //减去页面上固定高度height
                        this.tabsHeight = h - 294;
                    }
                })();
            };
        },
        comeIn() {
            var h =
                document.documentElement.clientHeight ||
                document.body.clientHeight;
            this.curHeight = h - 224; //减去页面上固定高度height
            this.tabsHeight = h - 294;
        },
        findClick() {
            var _this = this; //debugger
            find(this.form.id)
                .then((response) => {
                    _this.form = response.data.borrow;
                    _this.sendForm = response.data;
                    _this.shopName = response.data.borrow.shopName;
                    //          _this.employeeName=response.data.employeeName
                    //_this.shopName = response.data.shopName;
                })
                .catch((error) => {});
        },
        installClose() {
            this.isNoInstall = false;
        },
        editClick() {
            this.$router.push({
                path: "/borrow/edit",
                query: { id: this.form.id },
            });
        },
        auditClick() {
            var _this = this;
            this.$confirm("是否审核?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.auditClicked = true;
                audit(this.form.id)
                    .then((response) => {
                        this.$message({
                            message: response.content,
                            offset: 120,
                            center: true,
                        });
                        _this.auditClicked = false;
                        this.findClick();
                        EventBus.$emit("borrow-view", response.data);
                    })
                    .catch((error) => {
                        _this.auditClicked = false;
                    });
            });
        },
        unAuditClick() {
            var _this = this;
            this.$confirm("是否取消审核?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.auditClicked = true;
                unAudit(this.form.id)
                    .then((response) => {
                        this.$message({
                            message: response.content,
                            offset: 120,
                            center: true,
                        });
                        _this.auditClicked = false;
                        this.findClick();
                        EventBus.$emit("borrow-view", response.data);
                    })
                    .catch((error) => {
                        _this.auditClicked = false;
                    });
            });
        },

        detailsClick(id) {
            alert("success" + id);
        },
        delClick() {
            var _this = this;
            this.$confirm("确认删除?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    _this.delClicked = true;
                    del(_this.form.id)
                        .then((response) => {
                            _this.delClicked = false;
                            EventBus.$emit("borrow-delete", response.data);
                            _this.$store
                                .dispatch("tagsView/delView", _this.$route)
                                .then(({ visitedViews }) => {
                                    _this.$router.push({
                                        path: "/borrow/list",
                                    });
                                }); // 关闭当前tab回到列表
                            _this.$message({
                                message: response.content,
                                offset: 120,
                                center: true,
                            });
                        })
                        .catch((error) => {
                            _this.delClicked = false;
                            console.log("error!!");
                        });
                })
                .catch(() => {});
        },
        isTeach(data) {
            this.isNoInstall = data;
        },
        printSetupClick() {
            this.isPrintShow = true;
            setTimeout(() => {
                this.$refs.orderPrintTwo.printSetUp();
            }, 1000);
        },

        clickedClick() {
            this.clicked = false;
        },
        handleCommand(command) {
            if (command == "printSetupClick") {
                this.printSetupClick();
            }
        },
    },
};
</script>

<style scoped>
.app {
    height: 80px;
    width: 100%;
    display: flex;
    background-color: rgba(233, 235, 236);
    margin-top: 20px;
}
.deliveryboy {
    height: 100%;
    width: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: rgb(245, 247, 250) 1px solid;
}
.content {
    height: 100%;
    width: 700px;
    display: flex;
    justify-content: space-around;
}
.content_one {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.summary {
    height: 100%;
    paddding-top: 40px;
    paddding-left: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-left: 20px;
    border-left: rgb(245, 247, 250) 1px solid;
}
.box-card {
    width: 100%;
    box-sizing: border-box;
}

.details_Header {
    display: flex;
    align-items: center;
}

.deleted_Line {
    width: 2px;
    height: 12px;
    background-color: #409eff;
}

.details_HeaderTitle {
    font-weight: 600;
    margin-left: 5px;
    display: block;
    width: 100px;
}

.deleted_OrderHeader {
    padding-top: 5px;
    padding-bottom: 10px;
    margin: 10px 0;
    border-left: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2;
}

.deleted_OrderTitle {
}

.deleted_OrderContent {
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.details_PayHeader {
    display: flex;
    align-items: center;
    margin-top: 40px;
}

.details_Buyers {
    display: flex;
    align-items: center;
}

.deleted_Row_Headings {
    color: #666666;
}

.deleted_OrderName {
    color: #409eff;
    margin-left: 5px;
    width: 250px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.product_header_name {
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #f2f2f2;
    margin-top: 20px;
    font-weight: 600;
}
.details_Title {
    font-size: 14px;
    color: #409eff;
}
.details_card {
    overflow: auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    border: 1px solid #f2f2f2;
    border-radius: 4px;
}
</style>
